<template>
  <div class="suggest-contain">
    <AppTopNav />

    <MyHeader :show="showCom" />
    <!-- 图片 -->
    <div class="pic">
      <img
        src="http://yanxuan.nosdn.127.net/185d8f403be6fc833c993f2cdaedcfb1.jpg?imageView&quality=95&thumbnail=1920x480"
        alt=""
      />
      <ul class="item">
        <li><span>我的甄选家</span></li>
        <li><span>样式甄选</span></li>
        <li><span>建议征集</span></li>
        <li><span>样品试用</span></li>
      </ul>
    </div>
    <!-- 样式甄选 -->
    <div class="hd">
      <div class="sp">
        <span style="font-size: 26px; margin-top: 30px">样式甄选</span>
      </div>
      <div class="line"></div>
      <p>请挑选你喜欢的好物款式</p>
    </div>
    <div class="like">
      <div class="floor1">
        <span style="color: #b4a078">| 智造篇 |</span>
        <span style="margin-left: 7px">头部气压按摩带</span>
      </div>
      <div class="floor2">
        <p>pick你喜欢的颜色 · 参与数5272</p>
        <div class="line"></div>
      </div>
      <div class="goods">
        <el-image
          src="https://yanxuan.nosdn.127.net/d6b207ddb731373f30d3c6b4b09dcb50.png?imageView&quality=95&thumbnail=257y257"
          :preview-src-list="state.prewList"
          :initial-index="4"
          fit="cover"
          :zoom-rate="1.2"
          alt=""
          v-for="i in 4"
          :key="i"
          @mouseover="showPrew = true"
          @mouseleave="showPrew = false"
        />
        <div class="yl" v-if="showPrew">点击预览</div>
        <div class="text">
          <span v-for="i in 4" :key="i">
            <p>正红色</p>
            <p class="p0">755人喜欢</p>
          </span>
        </div>
      </div>
    </div>
    <div class="more">更多甄选</div>
    <!-- 建议征集 -->
    <div class="hd" style="background-color: #fff">
      <div class="sp">
        <span style="font-size: 26px; margin-top: 30px">建议征集</span>
      </div>
      <div class="line"></div>
      <p>告诉我们，你的好物标准</p>
    </div>
    <div class="jy">
      <img
        src="https://yanxuan.nosdn.127.net/54a943d8f41d99d1a9c2864b098860ae.jpg?imageView&quality=95&thumbnail=324y270"
        alt=""
      />
      <div class="text">
        <p style="font-size: 22px">你期待提供哪些宠物的功能性服务</p>
        <p>
          如果严选开放了一个可以互动的内容社区，有单独的宠物板块。除了常规的晒日常、学习养宠知识、相互交流功能，你期待还有哪些线上的功能性服务？专业的养宠达人们，快来谈谈吧~
        </p>
        <div style="display: flex; margin-top: 75px">
          <el-avatar
            v-for="i in 5"
            :key="i"
            size="small"
            src="https://yanxuan.nosdn.127.net/c2f4f8c4b59370556df21734e4a63cf3.jpg?imageView&quality=95&thumbnail=34y34"
          />
          <p style="margin: 5px 0 0 20px">2271人提过建议·21945人看过</p>
          <el-button size="large" type="warning" style="margin-left: 250px"
            >我来建议</el-button
          >
        </div>
      </div>
    </div>
    <div class="ing">
      <p style="font-size: 22px; margin: 30px 0">TA们正在建议</p>
      <div class="suggest">
        <div class="per" v-for="i in 3" :key="i">
          <el-avatar
            size="default"
            src="https://yanxuan.nosdn.127.net/c2f4f8c4b59370556df21734e4a63cf3.jpg?imageView&quality=95&thumbnail=34y34"
            style="margin-left: -140px; margin-right: 20px"
          />
          <span>梦*****</span>
          <span>2021-04-28</span>
          <p style="margin-top: 20px; text-align: left">
            希望能建立一个宠物美容社区，交流学习爱宠的日常护理，如何简单地帮爱宠梳理和修剪毛发、修剪脚指甲等，希望严选也能上架一些宠物的美容工具，因为相信严选的品质，只想在严选买到心仪的东西。
          </p>
        </div>
      </div>
    </div>
    <div class="more">更多征集</div>
    <!-- 样品试用 -->
    <div class="hd" style="background-color: #fff">
      <div class="sp">
        <span style="font-size: 26px; margin-top: 30px">样品试用</span>
      </div>
      <div class="line"></div>
      <p>加入我们，一起检验好物初样</p>
    </div>
    <div class="gjp">
      <ul class="goods-list">
        <li style="position: relative" class="item" v-for="i in 3" :key="i">
          <div class="rep">540期试用报告出炉中</div>
          <img
            src="https://yanxuan.nosdn.127.net/36f206312467761728c428959533439f.png?imageView&quality=95&thumbnail=352y298"
          />
          <div class="title ellipsis">
            锁温力MAX 黑科技高领打底衫参考价: ¥139
          </div>
          <div class="price">秋冬百搭神器，显瘦且呵护保暖</div>
          <el-button size="large" type="warning" style="margin: 16px 110px"
            >查看试用报告</el-button
          >
        </li>
      </ul>
    </div>
    <div class="re">
      <div class="more">TA们的试用报告</div>
      <div class="report" v-for="i in 3" :key="i">
        <img
          src="https://yanxuan.nosdn.127.net/bbf6a72224fbcf5a62b73bd5295b1e88.jpg?imageView&quality=95&thumbnail=363y300"
          alt=""
        />
        <div class="pass">样品已通过</div>
        <div class="per" style="margin: 25px">
          <el-avatar
            size="default"
            src="https://yanxuan.nosdn.127.net/c2f4f8c4b59370556df21734e4a63cf3.jpg?imageView&quality=95&thumbnail=34y34"
            style=""
          />
          <span style="margin-left: 20px">梦*****</span>
          <span>造价工程师</span>
          <p style="font-size: 22px; margin-top: 20px">
            解锁牛奶的搭配的多种可能~
          </p>
          <p style="margin-top: 20px; text-align: left">
            严选的牛奶选择很多：国产的、进口的，全脂、低脂、高蛋白的。承包了全家人的日常牛奶。
            新推出的牧场日记全脂纯牛奶更让人充满期待~
            今天尝试了以一盒牛奶搭配的六种美食。
            接下来，本人将从物流包装、营养成分、味道口感、美食搭配4个方面进行测评。
            一、 物流包装 量身定制的纸箱满满当当地...
          </p>
          <p style="margin-top: 65px">来自 432期试用样品“澳大利亚全脂纯牛奶”</p>
        </div>
      </div>
      <div class="more">更多试用</div>
    </div>
    <!-- 甄选结果 -->
    <div class="hd" style="background-color: #fff">
      <div class="sp">
        <span style="font-size: 26px; margin-top: 30px">甄选结果</span>
      </div>
      <div class="line"></div>
      <p>因为你，这些好物得以面世</p>
    </div>
    <div class="gjp">
      <ul class="goods-list">
        <li
          style="width: 265px; height: 400px"
          class="item"
          v-for="i in 4"
          :key="i"
        >
          <img
            style="width: 265px; height: 260px"
            src="https://yanxuan-item.nosdn.127.net/2a8e1df80d24fea7680dd1f0ce43e750.png?imageView&quality=95&thumbnail=265y265"
          />
          <div class="no"><span>特价</span></div>
          <div class="title ellipsis" style="font-size: 13px">
            澳大利亚天然牧场，3.3g...
          </div>
          <div class="price" style="color: red">￥156</div>
        </li>
      </ul>
    </div>
    <div class="more">更多商品</div>
  </div>
</template>

<script>
import AppTopNav from "@/components/AppTopNav.vue";
import MyHeader from "@/components/MyHeader.vue";
import { ref } from "vue";
import { onMounted } from "vue";
import { reactive } from "vue";
export default {
  components: {
    AppTopNav,
    MyHeader,
  },
  setup() {
    onMounted(() => {
      bin();
    });
    const showCom = ref(true);
    function bin() {
      showCom.value = false;
    }

    const showPrew = ref(false);

    const state = reactive({
        prewList:[
            "https://yanxuan.nosdn.127.net/d6b207ddb731373f30d3c6b4b09dcb50.png?imageView&quality=95&thumbnail=257y257"
        ]
    })
    return { showCom, bin, showPrew,state };
  },
};
</script>

<style lang="less">
.suggest-contain {
  .pic {
    img {
      position: relative;
      left: -52%;
      display: block;
      max-width: none;
    }
    .item {
      position: absolute;
      top: 188px;
      left: 80px;
      li {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 100px;
        margin: 3px 10px;
        border-radius: 5px;
        background-color: #fcf9f9cc;
        color: rgb(163, 157, 157);
        font-size: 16px;
      }
      li:hover {
        background-color: rgba(220, 208, 184, 0.377);
      }
    }
  }
  .hd {
    background-color: #fcf9f9cc;
    text-align: center;
    line-height: 75px;
    .sp {
      height: 50px;
    }
    .line {
      width: 50px;
      height: 2px;
      background: #333;
      margin: 20px auto 10px;
    }
  }
  .like {
    height: 514px;
    padding-top: 40px;
    padding-left: 120px;
    .floor1 {
      span {
        font-size: 22px;
      }
    }
    .floor2 {
      margin-top: 10px;
      display: flex;
      .line {
        height: 2px;
        width: 850px;
        margin-top: 15px;
        margin-left: 30px;
        border-bottom: 1px dashed #f6f3ed;
      }
    }
    .goods {
      position: relative;
      .text {
        display: flex;
        span {
          margin: 0 100px 0 100px;
          .p0 {
            margin-top: 15px;
            font-size: 12px;
          }
        }
      }
      .yl {
        position: absolute;
        top: 100px;
        left: 100px;
        height: 55px;
        width: 55px;
        background-color: #8b8a87;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
      }
    }
  }
  .more {
    font-size: 22px;
    text-align: center;
    line-height: 120px;
    height: 120px;
    background-color: #fcf9f9cc;
  }
  .jy {
    height: 270px;
    margin: 0 80px;
    background-color: #fcf9f9cc;
    display: flex;
    .text {
      margin: 40px 0 0 40px;
      p {
        margin-bottom: 15px;
      }
    }
  }
  .ing {
    text-align: center;
    .suggest {
      height: 180px;
      display: flex;
      margin-left: 80px;
      .per {
        border: 1px solid rgb(213, 209, 209);
        height: 140px;
        width: 314px;
        padding: 20px;
      }
    }
  }
  .goods-list {
    display: flex;
    margin-left: 80px;
    justify-content: flex-start;
    margin-bottom: 40px;
    .item {
      width: 345px;
      height: 440px;
      margin: 20px 5px 40px 5px;
      border: 1px solid #ede3cf;
      .rep {
        position: absolute;
        right: -3px;
        top: 20px;
        height: 30px;
        width: 170px;
        background-color: #fff;
        opacity: 0.85;
        text-align: center;
        line-height: 30px;
        border-right: 3px solid black;
      }
      .no {
        text-align: center;
        transform: translateY(5px);
        span {
          background-color: #e36834;
          color: #f6f3ed;
          padding: 3px;
        }
      }
      img {
        width: 345px;
        height: 290px;
      }
      .hoverShadow();
      .title {
        font-size: 17px;
        text-align: center;
        padding: 15px 25px;
      }
      .price {
        text-align: center;
        font-size: 13px;
        color: gray;
      }
    }
  }
  .re {
    .report {
      position: relative;
      display: flex;
      margin-left: 80px;
      margin-right: 80px;
      margin-bottom: 30px;
      border: 1px solid #ede3cf;
      .pass {
        position: absolute;
        left: 0;
        top: 30px;
        height: 35px;
        width: 120px;
        background-color: #333;
        color: #e2cba0;
        text-align: center;
        line-height: 35px;
        font-size: 16px;
      }
    }
  }

  .demo-image__error .image-slot {
    font-size: 30px;
  }
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
}
</style>